<!--
 * @Author: xiezhiquan3878
 * @Date: 2024-06-29 12:00:40
 * @LastEditors: xiezhiquan3878 xiezhiquan3878
 * @LastEditTime: 2024-06-29 12:00:40
 * @FilePath: \heart-backed\src\views\banner\index.vue
 * @Description: 预约设置
-->
<template>
  <div
    class="app-container fit bg-#fff column relative overflow-hidden container-box"
  >
    <div class="header-title">预约管理设置</div>
    <div class="title">选择周期</div>
    <div class="list flex">
      <div
        v-for="(item, i) in list"
        :key="i"
        :class="['item-box', i === currentI ? 'on' : '']"
        @click="selectItem(item, i)"
      >
        <div style="margin-bottom: 8px">{{ item.name }}</div>
        <div class="w-12 h-12">
          <img
            v-show="item.select"
            src="@/assets/images/subscribe/select.png"
            alt=""
            class="w-12 h-12"
          />
        </div>
      </div>
    </div>
    <div
      class="title"
      style="margin: 20px 0 10px"
    >
      请选择预约时段以及预约人数
    </div>
    <div>
      <div
        v-for="(item, i) in list[currentI].timeList"
        :key="i"
      >
        <div class="time-title flex">
          <img
            @click="removeTime(i)"
            src="@/assets/images/model/delete.png"
            alt=""
            class="delete-icon"
          />
          预约时间段{{ i + 1 }}
        </div>
        <div class="time-box">
          <div class="flex item">
            <div class="label">时间段：</div>
            <el-time-picker
              is-range
              v-model="item.time"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围"
              class="w100"
              value-format="HH:mm:ss"
            ></el-time-picker>
          </div>
          <div class="flex item">
            <div class="label">预约人数：</div>
            <el-input-number
              class="w100"
              placeholder="请输入人数"
              v-model="item.body_limit"
            ></el-input-number>
          </div>
        </div>
      </div>
      <div
        class="text-#04D1B8 cursor-pointer add"
        @click="addTime"
      >
        <img
          src="@/assets/images/model/add.png"
          alt=""
        />
        增加时间段
      </div>
    </div>

    <div class="btn-box">
      <el-button
        size="small"
        @click="back"
      >
        返回
      </el-button>
      <el-button
        type="primary"
        size="small"
        @click="save"
      >
        保存
      </el-button>
    </div>
  </div>
</template>

<script>
import { saveSubscribe, getSubscribe } from '@/api/subscribe'

export default {
  components: {},
  data() {
    return {
      list: [
        {
          name: '星期一',
          week: 1,
          select: false,
          timeList: []
        },
        {
          name: '星期二',
          week: 2,
          select: false,
          timeList: []
        },
        {
          name: '星期三',
          week: 3,
          select: false,
          timeList: []
        },
        {
          name: '星期四',
          week: 4,
          select: false,
          timeList: []
        },
        {
          name: '星期五',
          week: 5,
          select: false,
          timeList: []
        },
        {
          name: '星期六',
          week: 6,
          select: false,
          timeList: []
        },
        {
          name: '星期日',
          week: 7,
          select: false,
          timeList: []
        }
      ],
      currentI: 0
    }
  },
  created() {},
  mounted() {
    this.getConfig()
  },
  methods: {
    getConfig() {
      getSubscribe().then((res) => {
        let list = res.data
        list.forEach((v) => {
          // v.week
          let i = this.list.findIndex((x) => x.week === v.week)
          this.list[i].select = true
          if (v.start_time_frame && v.end_time_frame) {
            this.list[i].timeList.push({
              time: [v.start_time_frame, v.end_time_frame],
              body_limit: v.body_limit
            })
          }
        })
        this.list = JSON.parse(JSON.stringify(this.list))
      })
    },
    back() {
      this.$router.go(-1)
    },
    save() {
      console.log(this.list)
      let newList = []
      let flag = true
      this.list.forEach((v) => {
        if (v.select) {
          if (v.timeList.length > 0) {
            v.timeList.forEach((x) => {
              if (!x.time || x.time.length < 2 || !x.body_limit) {
                flag = false
              }
              newList.push({
                week: v.week,
                body_limit: x.body_limit,
                start_time_frame: x.time && x.time[0],
                end_time_frame: x.time && x.time[1]
              })
            })
          }
        }
      })
      if (!flag) {
        this.$message.error('请完整输入已选择的日期预约时间或人数')
        return false
      }
      saveSubscribe(newList).then((res) => {
        this.$message.success('保存成功')
        this.$router.go(-1)
      })
    },
    selectItem(obj, i) {
      if (this.currentI == i) {
        this.$set(this.list[i], 'select', !obj.select)
      } else {
        this.currentI = i
      }
    },
    addTime() {
      this.list[this.currentI].timeList.push({})
    },
    removeTime(i) {
      this.list[this.currentI].timeList.splice(i, 1)
    }
  }
}
</script>
<style lang="scss" scoped>
.container-box {
  padding: 20px 150px;
  position: relative;
  overflow: auto;
}
.header-title {
  position: relative;
  padding: 8px 13px;
  font-weight: 600;
  font-size: 20px;
  color: #1c1f23;
  line-height: 28px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  margin-bottom: 20px;
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: #04d1b8;
  }
}
.title {
  font-weight: 400;
  font-size: 14px;
  color: #1c1f23;
}
.list {
  align-items: center;
  margin-top: 8px;
}
.item-box {
  width: 52px;
  height: 61px;
  margin-right: 20px;
  flex: none;
  background: #f4f5f9;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #9e9e9e;
  padding: 12px 8px;
  font-size: 12px;
  flex-wrap: wrap;
  cursor: pointer;
  &.on {
    background: rgba(4, 209, 184, 0.1);
    color: #04d1b8;
  }
}
.time-box {
  background: #f4f5f9;
  margin: 2px 0 8px;
  padding: 12px;
  font-weight: 400;
  font-size: 12px;
  color: #1c1f23;
  .label {
    width: 68px;
    flex: none;
  }
  .item {
    align-items: center;
    margin-bottom: 10px;
    .w100 {
      width: 100%;
    }
  }
}
.time-title {
  font-weight: 400;
  font-size: 12px;
  color: #1c1f23;
  align-items: center;
}
.delete-icon {
  width: 14px;
  height: 14px;
  display: inline-block;
  margin-right: 2px;
  cursor: pointer;
}
.add {
  font-weight: 400;
  font-size: 12px;
  display: flex;
  align-items: center;
  img {
    width: 14px;
    height: 14px;
    display: block;
    margin-right: 4px;
  }
}
.btn-box {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
